import React, { FC, MouseEvent } from "react";
import style from "./index.module.scss";
import classNames from "classnames/bind";
import { Spin } from "antd";
// import QuestionTitleComponent from "../../../questionComponents/questionTitle";
// import QuestionInputComponent from "../../../questionComponents/questionInput";
import useGetComponentInfo_redux from "../../../hooks/useGetComponentInfo_redux";
import { getComponentConfigByType } from "../../../questionComponents";
import { compoentInfoType, changeSelectedId, moveComponent } from "../../../store/componentReducer";
//引入按键监听
import useBindKeyPress from "../../../hooks/useBindKeyPress";
//引入dispatch
import { useDispatch } from "react-redux";

//引入拖拽组件
import SortTableContainer from "../../../components/SortTableContainer";
import SortTableItem from "../../../components/SortTableItem";

//这里要从redux获取组件数据
const CBN = classNames.bind(style);
type propsTypes = {
  loading: boolean;
};

function getComponent(componentinfo: compoentInfoType) {
  const { type, props } = componentinfo;
  const componentConfig = getComponentConfigByType(type);
  if (componentConfig == null) return null;
  const { Component } = componentConfig;
  return <Component {...props}></Component>;
}

const Canvaswrapper: FC<propsTypes> = (props) => {
  //监听快捷键
  useBindKeyPress();
  //使用dispatch
  const dispatch = useDispatch();
  //保存点击选择的selectedId
  function handleClick(evevt: MouseEvent, id: string) {
    //阻止冒泡行为
    evevt.stopPropagation();
    dispatch(changeSelectedId(id));
  }
  const { componentList, selectedId } = useGetComponentInfo_redux();
  const id_componentList = componentList.map((item: compoentInfoType) => {
    return {
      ...item,
      id: item.fe_id,
    };
  });
  //获取拖拽时候的方法
  function onDragEnd(oldIndex: number, newIndex: number) {
    // console.log(oldIndex, newIndex);
    dispatch(moveComponent({ oldIndex, newIndex }));
  }
  return props.loading ? (
    <div style={{ textAlign: "center", marginTop: "48px" }}>
      <Spin></Spin>
    </div>
  ) : (
    <SortTableContainer items={id_componentList} onDragEnd={onDragEnd}>
      <div className={CBN("canvas")}>
        {componentList
          .filter((c) => {
            return !c.ishidden;
          })
          .map((c) => {
            const { fe_id, islock } = c;
            //拼接Classnames
            const canvasWrapDefaultName = CBN("componentwrap");
            const selectCanvasName = CBN("selected");
            //组件是否锁定
            const lockedCanvasName = CBN("locked");
            const canvasWrapClassname = CBN({
              [canvasWrapDefaultName]: true,
              [selectCanvasName]: selectedId === fe_id,
              [lockedCanvasName]: islock,
            });
            return (
              <SortTableItem key={c.fe_id} id={c.fe_id}>
                <div
                  className={canvasWrapClassname}
                  key={fe_id}
                  onClick={(e) => {
                    handleClick(e, fe_id);
                  }}
                >
                  <div className={CBN("component")}>{getComponent(c)}</div>
                </div>
              </SortTableItem>
            );
          })}
        {/* <div className={CBN("componentwrap")}>
        <div className={CBN("component")}>
          <QuestionTitleComponent></QuestionTitleComponent>
        </div>
      </div>
      <div className={CBN("componentwrap")}>
        <div className={CBN("component")}>
          <QuestionInputComponent></QuestionInputComponent>
        </div>
      </div> */}
      </div>
    </SortTableContainer>
  );
};

export default Canvaswrapper;
